import '../App.css';
import React, { useState } from 'react';

function MyFirstReact() {
  return (
    <div>
      我的第一个React组件。名字是：{name}
      {Home}
      <button onClick={handerClick}>点击按钮</button>
      {flage}
      {html}
      {/* 4. JSX中样式处理
      4.1 行内样式- style
      4.2 类名样式处理 - className
      */}
      <h1 style={{ color: 'red', backgroundColor: 'skyblue' }}>JSX 行内样式</h1>
      <h2 className='title'>JSX 类名样式</h2>
      <button onClick={hClick}>点击按钮</button>
      {JSX3()}
      {Page1()}
      {render()}
      <button onClick={hClick2}>点击按钮2</button>
      {render2()}
      {InputComponent()}
      {MyComponent()}
      <br />
      {BookComponent()}
    </div>
  );
}

// 编写组件代码，创建想要的界面元素
export default MyFirstReact; // 导出组件
// 1.变量
const name = 'Jack';
const Home = <div style={{ color: 'red' }}>红色</div>;

// 2.
let islogin = true;
function JSX() {
  // 三元表达式
  return <div>{islogin ? <p>欢迎登录</p> : <p>请登录</p>}</div>;
}
const flage = JSX();

// 3.循环渲染
let books = ['DOM编程艺术', 'JS高级编程', 'React实战'];
function JSX2() {
  return (
    <ul>
      {books.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}
const html = JSX2();

/**
 * 练习
 * 1.根据变量islogin的值来做如下渲染：
 1.1.如果 islogin的值为true，则使用li标签生成两本书：React由浅入深，Vue由浅入深
 1.2.如果islogin的值为false，请显示 您未登录

 解答提示：1、定义一个全局的islogin变量，通过它的值来控制不同的内容渲染
           2、1.1和1.2两个要求是互斥的，可以使用三元表达式做判断
           3、生成书籍可以使用map方法遍历书籍数组（可以定义一个books的全局数组，里面放两本书名）生成 
 */
let islogin2 = true;
let arry = ['React由浅入深', 'Vue由浅入深'];
function JSX3() {
  return (
    <div>
      {islogin2 ? (
        <ul>
          {arry.map(item => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      ) : (
        '您未登录'
      )}
    </div>
  );
}

// React事件绑定
function handerClick() {
  islogin = !islogin;
}

function handerClick2() {
  islogin2 = !islogin2;
}

// 箭头函数
let msg = '我是类组件中的一个属性';
const hClick = () => {
  console.log(msg);
};
// class ClassComponent1 extends React.Component{
//   msg = '我是类组件中的一个属性';

//   hClick = ()=> { console.log(this.msg);}
//   render() {
//     return (<button onClick={this.hClick }>点击按钮</button> )
//    }

// }

// React事件对象
function handerClick3() {
  // e.preventDefault(); // 阻止浏览器默认行为
  console.log('函数组件中的onClick事件');
}
function Page1() {
  return (
    <div>
      <a href='https://www.baidu.com/?tn=95113403_hao_pg' onClick={handerClick3}>
        小叶测试 React事件对象
      </a>{' '}
    </div>
  );
}

// React 私有变量
// 初始化state状态数据(简化语法，推荐)
let state = { count: 0 };

function render() {
  // 使用状态数据
  return <div> {state.count} </div>;
}

function render2() {
  return <div> {state.count} </div>;
}

function hClick2() {
  state.count++;
}
// state和setState()
// 字符串
interface InputState {
  value: string;
}

function InputComponent() {
  const [state, setState] = useState<InputState>({ value: '1' });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setState({ value: e.target.value });
  };

  return (
    <div>
      <input type='text' value={state.value} onChange={handleChange} />
      <div>{state.value}</div>
    </div>
  );
}

// 数字
interface State {
  count: number;
}

function MyComponent() {
  const [state, setState] = useState<State>({ count: 0 });

  const increment = () => {
    setState(prevState => ({
      count: prevState.count + 1
    }));
  };

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

// 布尔
interface BooleState {
  isLogin: boolean;
}

// interface State {
//   isLogin: boolean;
// }

function BookComponent(){
  const [state, setState] = useState<BooleState>({ isLogin: false });

  const trigger=() => {
    setState(item => ({
      ...item,
      isLogin: !item.isLogin
    }));
  }

  return (
    <div>
      {state.isLogin ? (
        <ul>
          {arry.map(item => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      ) : (
        <p>您未登录</p>
      )}
      <br />
      <button onClick={trigger}>切换</button>
    </div>
  );
}
